window.onload = function() {

  // 获取DOM元素
  function getE(id) {
    return document.getElementById(id);
  }

  // 初始化DOM元素
  var contianer = getE('box');
  var leftin = getE('leftin');
  var rightin = getE('rightin');
  var leftout = getE('leftout');
  var rightout = getE('rightout');

// 新建一个节点
  function creatNewItem(val) {
    var item = document.createElement('div');
    item.className = 'items';
    item.innerHTML = val;
    return item;
  }

// 左侧入
  function leftIn() {
    // 获取input的值
    var val = getE('input').value;
    var node = contianer.firstChild;
    // 当node存在则插入第一位
    node && contianer.insertBefore(creatNewItem(val), node);
  }

// 右侧入
  function rightIn() {
    var val = getE('input').value;
    contianer.appendChild(creatNewItem(val));
  }

// 左侧出
  function leftOut() {
    var node = contianer.firstChild;
    delNode(node);
  }

// 右侧出
  function rightOut() {
    var node = contianer.lastChild;
    delNode(node);
  }

// 单价节点删除
  function cdel(e) {
    var node = e.target;
    if (node.className.toUpperCase() === 'ITEMS') {
      delNode(node);
    }
  }

// 删除节点
  function delNode(node) {
    node && contianer.removeChild(node);
    alert(node.innerHTML);
  }

// 定义事件
  leftin.addEventListener('click', leftIn, false);
  rightin.addEventListener('click', rightIn, false);
  leftout.addEventListener('click', leftOut, false);
  rightout.addEventListener('click', rightOut, false);
  contianer.addEventListener('click', cdel, false);

};
